{assign $pathMiniature = PHOTO_ANNONCE_PATH}
{assign $pathNormal = PHOTO_ANNONCE_PATH}
{assign $path_annonce_in_datas = PHOTO_ANNONCE_PATH_IN_DATAS }
{assign $path = PHOTO_ANNONCE_PATH}
<input type="hidden" id='path_min' value="{$path}" />
<input type="hidden" id="delImage" value="{$j_basepath}design/front/images/DeleteRed.png" />
<input type="hidden" id="noImage" value="{$j_basepath}design/front/images/no_image.jpg" />
<h2>Photo</h2>
{literal} 
        <script type="text/javascript">
			document.write('<style>.noscript { display: none; }</style>');
			$(document).ready(function($) {
				// We only want these styles applied when javascript is enabled
				$('div.content').css('display', 'block');
            });
		</script> 
{/literal}

<!-- End Gallery Html Containers -->
<div style="clear: both;"></div>
<div class="navigation-container" style="padding:0; left:0%; width:719px;">
<div class="photos" style="background:#ECF8FD; padding:8px 0 0px 28px; margin-bottom:15px;">
    <div class="wrap">
        <div class="p1" style="font:normal 12px Arial, Helvetica, sans-serif; color:#666699;">
            <p><strong>Photo principale gratuite</strong> vue exterieure du vehicule uniquement</p>
            <div class="upload_image" style="margin-left:15px;">
                <img src="{if ($photo_princ != '')}{if (!isset($fimage))}{$pathMiniature}{/if}{$photo_princ}{else}{$j_basepath}design/front/images/no_image.jpg{/if}" id="thumb" title="photo principale" alt="no image"/>
                <!--chemin du fichier-->
                <input type="text" value="{if ($photo_princ != '')}{$photo_princ}{/if}" id="fic_princ" name="fic_princ"  class="nom_fic" readonly="true" style="margin-top:25px; margin-left:25px;width:200px;"/>
                <!-- Upload Button-->
                <div id="upload" class='btn_upload'>Parcourir</div>
                <span id="status_fic" >
                    <img src="{$j_basepath}design/front/images/loading.gif" class="loading"  alt="no image"/>
                    <p></p>
                </span> 
            </div>
            <p><strong>Photos supplémentaires</strong> jusqu'a 10 photos</p>

            <div class="upload_image" style="margin-left:15px;">
                <img src="{$j_basepath}design/front/images/no_image.jpg" id="thumb_supp" alt="no image"/>
                <!--chemin du fichier-->
                <input type="text" id="fic_supp" class="nom_fic" readonly="true" style="margin-top:25px; margin-left:25px;width:200px;"/>
                <!-- Upload Button-->
                <div id="upload_supp" class='btn_upload'>Parcourir</div>
                <span id="status_supp" >
                    <img src="{$j_basepath}design/front/images/loading.gif" class="loading"  alt="no image"/>
                <p></p>
                </span> 
            </div>

        </div>

        <!--begin gallery-->
        <div style="position:relative; margin-left:160px; margin-top:0px; width:413px; height:318px; display:block;"> 
        <img id='ap_img'  style="margin-left:-75px" src="{if ($photo_princ != '')}{if (!isset($fimage))}{$pathMiniature}{/if}{$photo_princ}{else}{$j_basepath}design/front/images/no_image.jpg{/if}" width="359" height="299" title="Cliquer pour agrandir" />
        <a class="showPP" style="cursor: pointer;position:absolute;margin-left: -40px;margin-top: 250px;" href="{if ($photo_princ != '')}{if (!isset($fimage))}{$pathMiniature}{/if}{/if}{$photo_princ}" rel="prettyPhoto[pp_gal]"><img  alt="" src="{$j_basepath}design/front/images/zoom.png" title="Zoom" /></a>
        <div id="forPopUp"  style="display: none;"> 
            {if isset($photoSrc)}
                {foreach $photoSrc as $key=>$item}
                    {if (($key !=0) || (isset($fimage)))}
                        <a href="{$pathMiniature}{$item->photo_name}" rel="prettyPhoto[pp_gal]" title="">
                        <img src="{$pathMiniature}{$item->photo_name}" width="60" height="60" alt="" /> </a>
                    {/if}

                {/foreach}
            {/if}
            </div>
        </div>

        <div class="infiniteCarousel" style="margin:0 0 70px 50px;position:relative;">
            <div class="wrapper">
                <ul>
                    {if ($photo_princ != '')}
                        <li>
                                <img src="{if (!isset($fimage))}{$pathMiniature}{/if}{$photo_princ}" class="photo_princ"  title="{$photo_princ}" width="84" />
                                <img src="{$j_basepath}design/front/images/DeleteRed.png" class="deleteImage" title="Supprimer cette image" />
                        </li>
                    {/if}
                    {if isset($photoSrc)}
                        {foreach $photoSrc as $key=>$item}
                            {if (($key !=0) || (isset($fimage)))}
                                <li>
                                    <img src="{$pathMiniature}{$item->photo_name}" title="{$pathMiniature}{$item->photo_name}" width="84" />
                                    <img src="{$j_basepath}design/front/images/DeleteRed.png" class="deleteImage" title="Supprimer cette image" />
                                </li>
                            {/if}

                        {/foreach}
                    {/if}
                </ul>        
            </div>
        </div>
        <div class="clear">&nbsp;</div><br /><br />
        <!--end gallery-->
    </div>
</div>
<!-- fin photos -->
<div class="clear">&nbsp;</div>
<input type="hidden" name="photo-annonce" value="{if isset($photoSrc)}{foreach $photoSrc as $key=>$item}{if (($key !=0) || (isset($fimage)))}{if ($key >0)},{/if}{$item->photo_name}{/if}{/foreach}{/if}" id="photo-annonce" />

</div>
<div class="clear">&nbsp;</div>
	<h2>Vid&eacute;o</h2>
	<div style="background:#ECF8FD; padding:15px 0 0px 28px; margin-bottom:15px;">
          <input type="text" name="annonce_video" id="annonce_video" value="{if isset($annonceVideo)}{$annonceVideo}{/if}" style="float:left; display:inline; padding:0 5px; margin:0 5px 0 0; font-size:13px; width:478px; height:25px" /><div style="float:left; margin:5px 0 0; color:#666699;"> : (url - sur youtube) &nbsp; <a href="#" id="appercu_video">Aperçu</a></div>
        <div id="video" style="display:none;">
          <iframe style="margin:15px 0 0 57px;"></iframe>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    
{literal} 
<script type="text/javascript">
        $(function () {
           // Aperçu de la vidéo - youtube
            $('#appercu_video').click(function () {
            var lien = $('#annonce_video').val();
           

            var reg=new RegExp("[ v=&]+", "g");
            var tableau=lien.split(reg);
            url = "http://www.youtube.com/embed/"+tableau[1];


                if (lien)
                {
                    $('#video').show();
                    $("iframe").src(url, function(duration) {
                      }, {
                        timeout: $("#timeout").val(),
                        onTimeout: function() { alert('Temps dépassé'); }
                      }
                    );
                }
                 else
                 {
                    $('#video').hide();
                 }
                 return false;
            });

			// Récupération des noms des images
            $('#valider-annonce').click(function () {
				monImage = "";
				$('.imglist').each(function (i) {
					sep = (!i)?"" : "," ;
					monImage += sep + $(this).attr('name');
				});
				$('#photo-annonce').val(monImage);
				
            });
        });
    </script>
<style type="text/css">
        iframe {
            border: 1px solid black;
            height: 350px;
            width: 550px;
        }
    </style>


{/literal}
